<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>菜单</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../dist/css/workflow-theme.css">
</head>
<body>
    <div class="navbar">Navbar</div>
    <div class="content">
        <div class="menu">
            <div class="menu-header">
            </div>
            <a class="menu-item" href="#task-1" role="button" data-toggle="collapse">
                <img src="images/placeholder.jpg" alt="task 1">
                <span class="hidden-md hidden-sm hidden-xs">First</span>  
                <span class="caret"></span>              
            </a>
            <div class="collapse menu nested" id="task-1">
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First A</span> 
                </a>
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First B</span> 
                </a>
            </div>
            <a class="menu-item" href="#task-2" role="button" data-toggle="collapse">
                <img src="images/placeholder.jpg" alt="task 2">
                <span class="hidden-md hidden-sm hidden-xs">Second</span>
                <span class="caret"></span>   
            </a>
            <div class="collapse menu nested" id="task-2">
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First A</span> 
                </a>
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First B</span> 
                </a>
            </div>
            <a class="menu-item" href="#task-3" role="button" data-toggle="collapse">
                <img src="images/placeholder.jpg" alt="task 3">
                <span class="hidden-md hidden-sm hidden-xs">Third</span>
                <span class="caret"></span>   
            </a>
            <div class="collapse menu nested" id="task-3">
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First A</span> 
                </a>
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First B</span> 
                </a>
            </div>
            <a class="menu-item " href="#task-4" role="button" data-toggle="collapse">
                <img src="images/placeholder.jpg" alt="task 4">
                <span class="hidden-md hidden-sm hidden-xs">Fourth</span>
                <span class="caret"></span>   
            </a>
            <div class="collapse menu nested" id="task-4">
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First A</span> 
                </a>
                <a class="menu-item" href="#" data-toggle="popover" data-content="First中文中文中文">
                    <img >
                    <span class="hidden-md hidden-sm hidden-xs">First B</span> 
                </a>
            </div>
            <a class="menu-item " href="/Fifth" data-toggle="popover" data-content="First">
                <img src="images/placeholder.jpg" alt="task 5"><span class="hidden-md hidden-sm hidden-xs">Fifth</span>
            </a>
            <a class="menu-item " href="/Sixth" data-toggle="popover" data-content="First">
                <img src="images/placeholder.jpg" alt="task 6"><span class="hidden-md hidden-sm hidden-xs">Sixth</span>
            </a>
            <a class="menu-item " href="/seventh" data-toggle="popover" data-content="First">
                <img src="images/placeholder.jpg" alt="task 7"><span class="hidden-md hidden-sm hidden-xs">Seventh</span>
            </a>
            <a class="menu-item " href="/Eighth" data-toggle="popover" data-content="First">
                <img src="images/placeholder.jpg" alt="task 8"><span class="hidden-md hidden-sm hidden-xs">Eighth</span>
            </a>
        </div>
        <div class="tab">
            <div class="tab-header">Tab Header</div>
            <div class="tab-content">
                Tab Content
                <div class="popover top" style="display:block; top:200px; left:200px;">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Popover 顶部</h3>
                    <div class="popover-content">
                        <p>中文中文中文中文中文中文中文中文中文中文</p>
                    </div>
                </div>
                <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample">
                    Link with href
                  </a>
                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
                    Button with data-target
                  </button>
                <div class="collapse" id="collapseExample">
                    <div class="well">
                        中文中文中文中文中文中文中文中文中文中文<br> 中文中文中文中文中文中文中文中文中文中文
                        <br> 中文中文中文中文中文中文中文中文中文中文
                        <br> 中文中文中文中文中文中文中文中文中文中文
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../dist/js/workflow-theme.js"></script>
    <script>
        $('[data-toggle="popover"]').popover({
            trigger: 'hover | focus ',
            container: 'body'
        });
    </script>
</body>
</html>